<template>
  <div class="ycdwrap" id="ycdwrap">
    <div class="yc-table-wrp">
      <div>
        <yc-title class="title" value="账号管理"></yc-title>
      </div>
      <div class="acc-man-body">
        <label class="yc-table">姓名</label>
        <el-input maxlength="30" class="input" v-model="name"></el-input>
        <yc-search-button @click="handleSearch"></yc-search-button>
      </div>
      <yc-button class="newadd" @click="handleAdd" value="新增"></yc-button>
      <yc-table ref="getPage" :total="total" :tableData="tableInfo"></yc-table>
      <!--  弹框 -->
      <div class="newadddcmd">
        <el-dialog  title="添加账号" top="200px" id="addRole"  custom-class="newAddCoryRightWrapper" :visible.sync="show">
          <el-form :rules="rules" ref="form" label-position="left" :model="form">
            <el-form-item label="员工角色" label-width="80px">
              <el-select style="width: 86%;" v-model.trim="form.roleId" placeholder="请选择员工角色">
                <el-option v-for="(item, index) in form.roleArray"  :label="item.roleName" :value="item.roleId" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="员工姓名" prop="roleName" label-width="80px">
              <el-input maxlength="30" style="width: 86%;" v-model.trim="form.roleName"></el-input>
            </el-form-item>
            <el-form-item prop="account" label="登入账号" label-width="80px">
              <el-input  minlength="1" maxlength="40" style="width: 86%;" auto-complete="off" v-model.trim="form.account" ></el-input>
            </el-form-item>
            <el-form-item  prop="password" label="登入密码" label-width="80px">
              <el-input minlength="6" maxlength="40"  type="password"  style="width: 86%;" auto-complete="off" v-model.trim="form.password"></el-input>
            </el-form-item>
            <el-form-item label="所在地区" label-width="80px">
              <el-input style="width: 86%;" maxlength="30" v-model.trim="form.adress" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注说明" label-width="80px">
              <el-input style="width: 86%;" maxlength="30" v-model.trim="form.description" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="账户状态" label-width="80px">
              <el-select style="width: 86%;" v-model.trim="form.status" placeholder="请选择账户状态">
                <el-option label="正常" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button class="cancleBtn" @click="handleCanel">取 消</el-button>
            <el-button type="primary" @click="handSure">保 存</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import request from 'request'
import ycTable from './com/table'
import ycTitle from '@/components/ycTitle.vue'
import ycButton from '@/components/button.vue'
import ycInput from '@/components/yc-input.vue'
import ycSearchButton from '@/components/searchButton.vue'
export default {
  name: 'accountManage',
  components: {
    ycTable,
    ycTitle,
    ycButton,
    ycSearchButton,
    ycInput
  },
  data () {
    var checkName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('员工姓名不能为空'))
      } else {
        callback()
      }
    }
    var checkAccount = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('登入账号不为空'))
      }
      var re = /^1\d{10}$/
      if (re.test(value)) {
        callback()
        return true
      } else {
        return callback(new Error('请输入手机号码'))
      }
    }
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('登入密码不为空'))
      }
      if (value.length < 6 || value.length > 40) {
        return callback(new Error('密码长度大于6小于40'))
      } else {
        callback()
      }
    }
    return {
      name: '',
      total: null,
      show: false,
      tableInfo: [],
      form: {
        roleArray: [],
        roleId: '',
        roleName: '',
        account: '',
        password: '',
        adress: '',
        description: '',
        status: ''
      },
      rules: {
        roleName: [
          {required: true, validator: checkName, trigger: 'blur'}
        ],
        account: [
          {required: true, validator: checkAccount, trigger: 'blur'}
        ],
        password: [
          {required: true, validator: checkPassword, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    handleCanel () {
      this.show = false
      this.clearAdd()
    },
    clearAdd () {
      this.form.account = ''
      this.form.adress = ''
      this.form.description = ''
      this.form.password = ''
      this.form.roleName = ''
      this.form.roleId = ''
      this.form.status = '1'
    },
    handleSearch () {
      this.init()
    },
    handleAdd () {
      this.show = true
      setTimeout(() => {
        this.$refs.form.resetFields()
        this.form.status = '1'
      }, 100)
      request.userRoles().then(res => {
        this.form.roleArray = res
      })
    },
    handSure () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          var data = {
            account: this.form.account,
            addr: this.form.adress,
            description: this.form.description,
            name: this.form.roleName,
            pwd: this.form.password,
            roleId: this.form.roleId,
            status: this.form.status
          }
          request.isRepeat(this.form.account).then(res => {
            if (!res) {
              this.$message.error('登入账号已存在')
              return
            }
            request.addAccont(data).then(res => {
              if (res) {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
                setTimeout(() => {
                  this.show = false
                  this.init(this.$refs.getPage.currentPage)
                  this.clearAdd()
                }, 500)
              }
            }).catch(e => {
              this.$message.error('添加失败')
            })
          })
          return true
        } else {
          return false
        }
      })
    },
    init (val) {
      request.getAccont({
        params: {
          name: this.name || '',
          p: val || 1,
          size: 10
        }
      }).then(res => {
        this.total = res.total
        this.tableInfo = res.records
      })
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
.yc-table-wrp{
  .acc-man-body{
    display flex
    align-items center
    padding 20px 0 0 0
  }
  .newadd{
    float right
    margin 20px 0
  }
}
</style>
